<template>
	<view class="goodList">
		<u-skeleton rows="3" title loading class="pd40" rowsHeight="60" v-if="!listData"></u-skeleton>
		<view v-else>
			<view v-for="i in listData">
				<view v-if="i.child.length" class="card">
					<uni-section :title="i.name" type="line" class="title"></uni-section>
					<view v-for="item in i.child" class="goods">
						<view class="imgbox">
							<image src="../../static/images/user.jpg" mode="aspectFill" class="img" v-if="!item.thum.length"></image>
							<image :src="item.thum[0].path" mode="aspectFill" class="img" v-else></image>
						</view>
						<view class="flex column jcsb">
							<view class="lm1">{{ item.name }}</view>
							<view class="flex">
								<u-icon name="file-text" size="24" class="mgr20" @click="editItem(item)"></u-icon>
								<u-icon name="trash" size="24" @click="deleteItem(item)"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="plus" @click="addPlus"><u-icon name="plus" size="24" color="#fff"></u-icon></view>
</template>

<script setup>
import { onMounted, ref } from 'vue';
const goodObj = uniCloud.importObject('mall-goods', {
	customUI: false
});
const listData = ref();
const getData = async () => {
	let res = await goodObj.getMyshop();
	listData.value = res;
	console.log(listData.value);
};
//修改操作
const editItem = (item) => {
	uni.navigateTo({
		url: '/pages_main/goods/editGoods?id=' + item._id
	});
};
const addPlus = () => {
	uni.navigateTo({
		url: '/pages_main/goods/editGoods'
	});
};
const deleteItem = (item) => {
	uni.showModal({
		title: '是否删除该商品',
		success(res) {
			if (res.confirm) {
				goodObj.deleteList(item._id);
				getData();
			}
		}
	});
};
onMounted(() => {
	getData();
});
</script>

<style lang="scss" scoped>
$uni-success: #18bc37 !default;
::v-deep .uni-section {
	padding: 8rpx;
	background-color: #fff;
	& .line {
		background-color: blue;
	}
}
.goodList {
	padding: 20rpx;
	.card {
		background-color: #fff;
		margin: 20rpx;
		padding: 20rpx;
		border-radius: 10rpx;
		.goods {
			display: flex;
			margin-top: 20rpx;
			font-weight: bold;
		}
		.imgbox {
			.img {
				width: 120rpx;
				height: 120rpx;
				margin-right: 20rpx;
			}
		}
	}
}
.plus {
	width: 60rpx;
	height: 60rpx;
	@include flex-box-set();
	background-color: #999;
	border-radius: 50%;
	padding: 20rpx;
	position: fixed;
	bottom: 140rpx;
	right: 50rpx;
}
</style>
